<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>资料录入</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/product.css">
	<link rel="stylesheet" href="css/select-big.css">
	<link rel="stylesheet" href="css/file.css">
	<style>
		.content-btn {
		    margin: 0 16px;
		}
		.product-child-content{
			width: 970px;
			margin: 0 auto;
		}
		.product-child-content .content-btn {
		    margin: 0;
		}
		.content-table-two tbody tr td input{
			width: 80%;
			height: 30px;
			line-height: 30px;
			background: #F9FBFF;
			border: 1px solid #ecf2f7;
			border-radius: 15px;
			text-align: center;
		}
		.icon-delImg{
			display: inline-block;
		    background: url(images/close-1.png)no-repeat;
		    width: 25px;
		    height: 25px;
		    cursor: pointer;
		}
		.icon-delImg:hover{
			background: url(images/close-1.png)no-repeat 0 -27px;
		}
		.bzColor{
			color: #d5d5d5;
		}
		.save-btn {
		    margin-left: 16%;
		}
	</style>
</head>
<body>
<div class="main-content">
	<form dataHref = "/contractDetail/saveCustData" >
	    <input name="id" type="hidden">
	    <input name="confirtrackDetail.contractid" type="hidden">
	    <input name="confirtrackDetail.id" type="hidden">
	    <input name="delids" type="hidden">
		<div class="main-bg1">
			<div class="content-btn bot-line">
				<a class="icon-back" href="informationEntry.html"></a><span class="title-info-a">资料录入</span>
			</div>
			<div class="content-list">
				<table class="content-table-newservice" cellspacing="0" cellpadding="0">
					<tbody>
						<tr>
							<td><span class="info-red"><font color="red">*</font>开户行：</span></td>
							<td><select  name="confirtrackDetail.bank" id="single1">
								<option value="1">中国人民银行</option>
								<option value="2">中国工商银行</option>
								<option value="3">中国农业银行</option>
								<option value="4">中国建设银行</option>
							</select></td>
						</tr>
						<tr>
							<td><span class="info-red"><font color="red">*</font>开户行号：</span></td>
							<td><input type="text" name ="confirtrackDetail.bankno"></td>
						</tr>
						<tr>
							<td><span class="info-red"><font color="red">*</font>银行卡号：</span></td>
							<td><input type="text"  name ="confirtrackDetail.account"></td>
						</tr>
						<tr>
							<td>备注：</td>
							<td><textarea name="confirtrackDetail.remark" id="" cols="30" rows="3"></textarea></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="dataEntry-content">
				<div class="content-btn bot-line">
					<span class="title-info">上传资料</span><em class="bzColor">（上图片要求：支持bmp、jpg、jpeg、jif、png格式，最大不能超过5M）</em>
				</div>
				<ul>
					<li>
						<span class="dataEntry-title"><font color="red">*</font>身份证扫描建：</span>
						<div class="dataEntry-info">
							<div class="uploadBtn" type = "1">
								<span>上传扫描件</span>
							</div>
							<p class="file-info">上传要求：扫描清晰，扫描比例1:1，正反面扫描，证件有效期内。<i class="btn-operation">查看示例</i></p>
							<div class="imgItems" type = "1">
							</div>
						</div>
					</li>
					<li>
						<span class="dataEntry-title"><font color="red">*</font>打款凭条扫描建：</span>
						<div class="dataEntry-info">
							<div class="uploadBtn" type = "2">
								<span>上传扫描件</span>
							</div>
							<p class="file-info">上传要求：扫描清晰，信息完全（打款日期、打款账户、客户姓名、打款金额、所属银行、交易号、确认凭条金额与打款金额与合同签署金额一致）。<i class="btn-operation">查看示例</i></p>
							<div class="imgItems" type = "2">
							</div>
						</div>
					</li>
					<li>
						<span class="dataEntry-title"><font color="red">*</font>客户证件扫描建：</span>
						<div class="dataEntry-info">
							<div class="uploadBtn" type = "3">
								<span>上传扫描件</span>
							</div>
							<p class="file-info">上传要求：扫描清晰，资产金额满足认购产品要求，仍在存续期内的资产证明，银行流水选取打款当日流水。<i class="btn-operation">查看示例</i></p>
							<div class="imgItems" type = "3">
							</div>
						</div>
					</li>
					<li>
						<span class="dataEntry-title"><font color="red">*</font>合同签署照片：</span>
						<div class="dataEntry-info">
							<div class="uploadBtn" type = "4">
								<span>上传扫描件</span>
							</div>
							<p class="file-info">上传要求：扫描清晰，客户签署过程拍照，客户手持身份证与合同拍照，照片可以看清楚身份证信息与合同名称。<i class="btn-operation">查看示例</i></p>
							<div class="imgItems" type = "4">
							</div>
						</div>
					</li>
					<li>
						<span class="dataEntry-title"><font color="red">*</font>其他资料：</span>
						<div class="dataEntry-info">
							<div class="uploadBtn" type = "5">
								<span>上传扫描件</span>
							</div>
							<p class="file-info">上传要求：扫描清晰，正反面扫描，确认所提供的银行卡号与合同签署账号一致。<i class="btn-operation">查看示例</i></p>
							<div class="imgItems" type = "5">
							</div>
						</div>
					</li>
				</ul> 
				<button class="save-btn matop30" type="submit">保存</button>
			</div>
		</div>
	</form>
</div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/jquery-validation/1.11.0/jquery.validate.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
	<script src="js/select.jquery.js"></script>
	<script type="text/javascript" src = "js/util.js"></script>
	<script type="text/javascript" src = "js/submit.js"></script>
	<script type="text/javascript" src = "js/validate.js"></script>
	<script>
	/* 
		<div class="imgItems">
			<div class="imgItems-modle">
				<img src="images/shenfenzheng.png" alt="">
				<i class="delImg"></i>
				<span class="imgName">shenfenzheng.png</span>
			</div>
		</div>
	*/
	var number = 0;
	    function validateCallback(){
		  return true;
	    }
		function submitCallback(){
		   layer.msg("录入成功！");
		   window.location.href="informationEntry.html";
		}
	
		function createObjectURL(blob) {
		    return window[window.webkitURL ? 'webkitURL' : 'URL']['createObjectURL'](blob);
		}
		$(document).ready(function(){
			var data =parent.getData();
			var seldate = {};
			seldate.id = data.id;	
			AjaxDate('contractDetail/findContractDetail',seldate);
			$('input[name="confirtrackDetail.contractid"]').val(data.id);
			$('input[name="id"]').val(data.id);

			$(".uploadBtn").click(function(){
				var $this = $(this);
				var index = $this.parent().find("input[type='file']").length;
				var type = $this.attr("type");
				var html = "<div style = 'display:none;'><input type = 'file' name = 'fileEntity[" + number + "].file' id = 'file_"+ type + "_" + index +"' /><input type = 'hidden' name = 'fileEntity["+number+"].type' value = '"+ type+"' /></div>";
				$this.after(html);
				$("#file_" + type + "_" + index).click();
				$("#file_" + type + "_" + index).change(function(){
					var imgType = 'bmp,jpg,jpeg,gif,png';
					var filename = this.files[0].name;
					var filesize = this.files[0].size;
					var length = filename.lastIndexOf('.');
					var fileType = filename.substring(length+1);
						if(imgType.indexOf(fileType)==-1){
							layer.msg('仅支持 bmp,jpg,jpeg,gif,png格式');
							return false;
						}
						if(filesize/1024/1024>5){
							layer.msg('最大不能超过5M!');
							return false;
						}
					$(this).parent().parent().find(".imgItems").append("<div class = 'imgItems-modle'>"+
						
							"<img  src = '' id = 'img_"+ type + "_" + index + "'/><i class='delImg' onclick = 'del(this)'></i><span name='resourceFile.name[" + index + "]' class='imgName'>" + filename + "</span></div>");
					var img = document.getElementById("img_"+ type + "_" + index);
					var obj = document.getElementById("file_" + type + "_ " + index); 		
					number++;
					if(this.files&&this.files[0]){ 
						console.log(this.files[0]);
						img.src = window.URL.createObjectURL(this.files[0]);
					
		            }else{  
		                obj.select();  
		                obj.blur();
		                var imgSrc = document.selection.createRange().text;  
		                //图片异常的捕捉，防止用户修改后缀来伪造图片  
		                try{  
		                    img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
		                    img.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;  
		                }catch(e) {  
		                    parent.layer.msg("上传的图片格式不正确，请重新选择");  
		                    return false;  
		                }  
		                document.selection.empty();  
		            }  
				});
			});
		})
		function getHeight(){
			var myiframeH=$(".main-content").height();
			var _parent=$(window.parent.document);
        	_parent.find('body').css('height',(myiframeH+150)+'px');
			_parent.find('.main-position').css('height',(myiframeH+100)+'px');
    	};
    	function callbackDateInfo(date){
    		if(date.confirtrackDetail){
    			var confirtrackDetail = date.confirtrackDetail
    			$('input[name="confirtrackDetail.id"]').val(confirtrackDetail.id);
    			$('input[name="confirtrackDetail.bank"]').val(confirtrackDetail.bank);
    			$('input[name="confirtrackDetail.bankno"]').val(confirtrackDetail.bankno);
    			$('input[name="confirtrackDetail.account"]').val(confirtrackDetail.account);
    			$('textarea[name="confirtrackDetail.remark"]').val(confirtrackDetail.remark	);
    		}
    		if(date.resource){
				var resource =date.resource;
				$('.imgItems').each(function(){
					var $this = $(this);
					var type =  $this.attr('type');
					resource.forEach(function(value){
						if(value.type == type){
							$this.append('<div class="imgItems-modle">'+
									'<img src="'+value.url+'" id="img_1_0"><i class="delImg" del-id="'+value.id+'" onclick = "delImg(this)">'+
									'</i><span class="imgName">'+value.name+'</span>'+
							'</div>');
							number++;
						}
					})
				})
			}			 
		}
    	function del(my){
    		my = $(my);
    		my.parent().parent().parent().find('div[style="display:none;"]').remove();
    		my.parent().remove();
    		number--;
    	
    	}
    	function delImg(my){
    		my = $(my);
    		var delVal =  $(my).attr('del-id');
    		var _input = $('input[name="delids"]');
    		var ids = _input.val();
    		if(ids ==''){
    			_input.val(delVal);
    		}
    		else{
    			_input.val(_input.val()+','+delVal);
    		}
    		my.parent().remove();  	
    	}
    	$('.main-content').resize(function(){
			getHeight();
		});
	</script>
</body>
</html>